<template>
    <div>
      <a-menu mode="inline" :open-keys="openKeys" style="width: 256px; height: 100vh; float: left;" @openChange="onOpenChange">
        <a-sub-menu v-for="submenu in newmenu" :key="submenu.key">
          <span slot="title">
            <a-icon :type="submenu.icon" />
            <span>{{ submenu.title }}</span>
          </span>
          <template v-if="submenu.children">
            <a-menu-item v-for="item in submenu.children" :key="item.key" @click="handleClick(item.path)">
              {{ item.title }}
            </a-menu-item>
            <a-sub-menu v-for="sub in submenu.submenus" :key="sub.key" :title="sub.title">
              <a-menu-item v-for="childItem in sub.children" :key="childItem.key" @click="handleClick(childItem.path)">
                {{ childItem.title }}
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-sub-menu>
      </a-menu>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        routerdata: [],
        rootSubmenuKeys: ['pingmian', 'qianduan', 'node'],
        openKeys: ['pingmian'],
        newmenu:[],
        menuData: [
          {
            key: 'pingmian',
            icon: 'mail',
            title: '平面设计师',
            children: [
              { key: '1', title: '平面设计师简历', path: '/text/pingmian' }
            ]
          },
          {
            key: 'qianduan',
            icon: 'appstore',
            title: '前端开发工程师',
            children: [
              { key: '2', title: '前端开发工程师简历', path: '/text/web' }
            ]
          },
          {
            key: 'node',
            icon: 'setting',
            title: 'NODE.js全栈工程师',
            children: [
              { key: '3', title: 'NODE.js全栈工程师简历', path: '/text/node' }
            ]
          },
        ],
      };
    },
    methods: {
      onOpenChange(openKeys) {
        const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
          this.openKeys = openKeys;
        } else {
          this.openKeys = latestOpenKey ? [latestOpenKey] : [];
        }
      },
      handleClick(path) {
        if(this.$route.path === path){
            this.$message.warning('当前页面已在首页');
        }
        else{
            this.$router.push(path);
        }
      },
    },
    mounted() {
      this.routerdata = this.$router;
      console.log(this.routerdata);
      const userrole = localStorage.getItem('userRole');
      if(userrole==='平面'){
        this.newmenu = this.menuData.slice(0,1)
      }
      else if(userrole==='前端'){
        this.newmenu = this.menuData.slice(1,2)
      }
      else if(userrole==='Node全栈'){
        this.newmenu = this.menuData.slice(2,3)
    }
    else if(userrole === '管理员'||userrole === '超级管理员'){
         this.newmenu = this.menuData
        }
  }
  };
  </script>
  
  <style scoped >
  </style>